<template>
  <view class="container">
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <block v-for="item in (dataSource as any)" :key="item">
          <ve-card class="relet-info" :title="`维修单号：${item.repairNo || '-'}`" fold v-model:initFold="item.initExpand">
            <template #status>
              <view class="status" v-if="item.statusStr">
                {{ item.statusStr }}
              </view>
            </template>
            <template #forever-show="{ show }">
              <ve-cell label="车辆当前归属门店">{{  item.carSiteName || '-' }} </ve-cell>
              <ve-cell label="入厂日期">{{ item.arrivalTime || '-' }}</ve-cell>
              <ve-cell label="出厂日期">{{ item.leaveTime || '-' }}</ve-cell>
              <ve-cell v-if="show" label="车牌号">{{ item.licenseNo || '-' }}</ve-cell>
            </template>
            <ve-cell label="维修单关联门店">{{ item.siteName || '-' }}</ve-cell>
            <ve-cell label="修理厂">{{ item.repairShop || '-' }}</ve-cell>
            <ve-cell label="入厂里程">{{ item.entranceKilometre || '-' }} 公里</ve-cell>
            <ve-cell label="出厂里程">{{ item.exportKilometre || '-' }} 公里</ve-cell>
            <ve-cell label="负责人">{{ item.undertaker || '-' }}</ve-cell>
            <ve-cell label="维修项目" :layout="item.repairItemNames && item.repairItemNames.length ? 'vertical' : 'horizontal'">
              <template v-if="item.repairItemNames.length > 0">
                <view v-for="(i, index) in item.repairItemNames" :key="index" style="display: inline-flex">
                  {{ i }}<text v-if="item.repairItemNames.length - 1 != index" style="margin: 0 16rpx">|</text>
                </view>
              </template>
              <text v-else>-</text>
            </ve-cell>
            <ve-cell-price label="维修费用总计" :value="item.repairAmount" priceAlign="left"></ve-cell-price>
          </ve-card>
        </block>
      </view>
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
      <!-- 底部加载状态 -->
      <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import useList from '@/hooks/useList'
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  const queryParam = ref({})

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/repair/pageList',
    queryParam,
    (result: any) => {
      console.log(result)
      result.forEach((item: any) => {
        item.initFold = true
        item.repairItemNames = item.repairItemNames ? item.repairItemNames.split(',') : []
      })
    },
  )

  onLoad((options: any) => {
    queryParam.value = {
      carId: options.id,
    }
    loadData()
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    padding: 24rpx 24rpx;
    background: #f7f8fa;
  }

  .status {
    font-size: 28rpx;
    font-weight: 400;
    color: #e59b1c;
    margin-left: 16rpx;
  }
  :deep(.ve-cell-title) {
      width: 240rpx;
      max-width: 240rpx;
    }
</style>
